import React, { useEffect, useRef, useState } from 'react'
import '../../App.less/Cart.less'
import './empty.less'
import { Space, Radio, Image, Stepper, Ellipsis, Checkbox, SwipeAction, Dialog ,Button} from 'antd-mobile'
import store from '../../store/index'
import { ChanNumcart, ChanState, ChangeAllcheck, DeFromcart } from '../../store/actionDemo'
import type { CartData } from '../../types/cart'
import { ReceiptOutline } from 'antd-mobile-icons'
import styles from './cart.module.css'
import { useHistory } from 'react-router-dom'
import { UseCartPrice, UseCartNumber, UseisAllTrue } from '../../hooks/useCartMethod'
import { Action, SwipeActionRef } from 'antd-mobile/es/components/swipe-action'

export default function useCart() {
  const [cartList, setCartList] = useState<CartData[]>(store.getState().cart)
  const ref = useRef<SwipeActionRef>(null)
  const history = useHistory()

  //商品卡片渲染
  const menus = cartList.map((item, index) => (
    <div className={'goods-cell'} key={index}>
      <SwipeAction
        ref={ref}
        rightActions={
          [
            {
              key: 'delete',
              text: '删除',
              color: 'danger',
              onClick: async () => {
                await Dialog.confirm({
                  content: '确定要删除商品吗？',
                })
                ref.current?.close()
                store.dispatch(DeFromcart(item.proid))
              },
            },
          ] as Action[]
        }
      >
        <Space className={'goods-card'}>
          <Space direction='vertical' className={'checkbox'} style={{ marginLeft: "5px" }}>
            <Checkbox
              checked={item.state}
              onChange={e => store.dispatch(ChanState({ proid: item.proid, e: e }))} />
          </Space>
          <Image src={item.img} width={100} height={100} fit='cover' />
          <div className='bodys'>
            <Ellipsis direction='end' rows={2} content={item.proname} className='titles' />
            <p className={"price"}>￥{item.price}</p>
          </div>
          <Stepper min={1} max={10}
            value={item.number}
            // value={item.number}
            onChange={(e) => store.dispatch(ChanNumcart({ proid: item.proid, number: e }))} />
        </Space>
      </SwipeAction>
    </div >
  ))
  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setCartList(store.getState().cart)
    })
    return () => unsubscribe()
  }, [])

  if (store.getState().cart.length === 0) {
    return <div className="empty">
      <img className="empty-cart" src="https://s.yezgea02.com/1604028375097/empty-car.png" alt="空购物车"/>
        <div className="title">购物车空空如也</div>
        <Button shape='rounded' color="success" onClick={()=>history.push('/home')} block>前往选购</Button>
    </div>
  } else return (
    <div className={'cart-container'}>
      <div className="shop">
        <ReceiptOutline />
        <span className={"shop-name"}>嗨购商城</span>
      </div>
      {menus}
      <div className={styles.actionBar}>
        <Checkbox
          checked={UseisAllTrue()}
          onChange={e => store.dispatch(ChangeAllcheck(e))}>全选</Checkbox>
        <p>
          合计：<strong>￥{UseCartPrice()}</strong>
        </p>
        <span>提交订单</span>
      </div>
    </div>
  )
}
